<template>
	<view class="wapper">
		<view class="payment list">
			<view class="title">
				缴费服务
			</view>
			<view class="main">
				
				<view class="item"  @click="goPayCharges(0)">
					<view class="image" style="background-color: rgb(33, 192, 250);">
						<image src="../../../static/images/水费.svg" mode=""></image>
					</view>
					<text>水费</text>
				</view>
				<view class="item" @click="goPayCharges(1)">
					<view class="image" style="background-color: rgb(18, 150, 219);">
						<image src="../../../static/images/电费.svg" mode=""></image>
					</view>
					<text>电费</text>
				</view>
				<view class="item"  @click="goPayCharges(2)">
					<view class="image" style="background-color: rgb(255, 69, 0);">
						<image src="../../../static/images/燃气费.svg" mode=""></image>
					</view>
					<text>燃气费</text>
				</view>
				<view class="item"  @click="goPayCharges(3)">
					<view class="image" style="background-color: rgb(112, 182, 3);">
						<image src="../../../static/images/暖气费.svg" mode=""></image>
					</view>
					<text>暖气费</text>
				</view>
				<view class="item">
					<view class="image" style="background-color: rgb(18, 150, 219);">
						<image src="../../../static/images/物业费.svg" mode=""></image>
					</view>
					<text>物业费</text>
				</view>
			</view>
		</view>
		<view class="open list">
			<view class="title" >
				开门服务
			</view>
			<view class="main">
				<view class="item" @click="goOpen()">
					<view class="image" style="background-color: rgb(18, 150, 219);">
						<image src="../../../static/images/手机开门.svg" mode=""></image>
					</view>
					<text>手机开门</text>
				</view>
				<view class="item" @click="goGuest()">
					<view class="image" style="background-color: rgb(154, 154, 250);">
						<image src="../../../static/images/访客邀请.svg" mode=""></image>
					</view>
					<text>访客邀请</text>
				</view>
			</view>
		</view>
		<view class="property list">
			<view class="title">
				物业服务
			</view>
			<view class="main">
				<view class="item" @click="goMyCar()">
					<view class="image" style="background-color: rgb(18, 150, 219);">
						<image src="../../../static/images/我的车位.svg" mode=""></image>
					</view>
					<text>我的车位</text>
				</view>
				<view class="item">
					<view class="image" style="background-color: rgb(0, 191, 191);">
						<image src="../../../static/images/充电桩申请.svg" mode=""></image>
					</view>
					<text>充电桩申请</text>
				</view>
				<view class="item">
					<view class="image" style="background-color: rgb(154, 154, 250);">
						<image src="../../../static/images/在线报修.svg" mode=""></image>
					</view>
					<text>在线报修</text>
				</view>
				<view class="item">
					<view class="image" style="background-color: rgb(245, 164, 146);">
						<image src="../../../static/images/投诉建议.svg" mode=""></image>
					</view>
					<text>投诉建议</text>
				</view>
				<view class="item">
					<view class="image" style="background-color: rgb(170, 170, 170);">
						<image src="../../../static/images/便民电话.svg" mode=""></image>
					</view>
					<text>便民电话</text>
				</view>
			</view>
		</view>
		<view class="community list">
			<view class="title">
				社区服务
			</view>
			<view class="main">
				<view class="item" @click="goNotice()">
					<view class="image" style="background-color: rgb(236, 155, 102);">
						<image src="../../../static/images/社区公告.svg" mode=""></image>
					</view>
					<text>社区公告</text>
				</view>
				<view class="item" @click="goCommunityList()">
					<view class="image" style="background-color: rgb(127, 223, 223);">
						<image src="../../../static/images/社区活动.svg" mode=""></image>
					</view>
					<text>社区活动</text>
				</view>
				<view class="item">
					<view class="image" style="background-color: rgb(133, 226, 158);">
						<image src="../../../static/images/问卷调查.svg" mode=""></image>
					</view>
					<text>问卷调查</text>
				</view>
				<view class="item">
					<view class="image" style="background-color: rgb(154, 154, 250);">
						<image src="../../../static/images/体检预约.svg" mode=""></image>
					</view>
					<text>体检预约</text>
				</view>

			</view>
		</view>
		<view style="height: 200rpx;"></view>
	</view>
	<tabBar :currentPage="1"></tabBar>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 去缴费页面
	function goPayCharges(index){
  uni.navigateTo({
    url: '/pages/waterElectric/components/payCharges?index='+index
  })
}

	// 去开门页面
	function goOpen(){
		uni.switchTab({url:'/pages/navBer/open/open'})
	}
	// 去访客邀请页面
	function goGuest(){
		uni.navigateTo({url:'/pages/guest/guest'})
	}

	//去我的车位
	function goMyCar(){
		uni.navigateTo({url:'/pages/stall/stall'})
	}


	// 去社区公告页面
	function goNotice(){
		uni.navigateTo({url:'/pages/notice/notice'})
	}
	// 去社区活动
	function goCommunityList(){
		uni.navigateTo({url:'/pages/Activities/communityList',animationType: 'pop-in',
	animationDuration: 200})
	}
	
	// 去在线报修页面
	function goRepair(){
		uni.navigateTo({url:'/pages/repair/repair'})
	}
	// 去投诉建议页面
	function goSuggest(){
		uni.navigateTo({url:'/pages/suggest/suggest'})
	}

</script>

<style lang="scss">
	.wapper {
		padding: 30rpx;
		border-top: 4rpx solid #e0e0e0;
		height: 100%;

		.list {
			.title {
				font-weight: 700;
				margin-bottom: 20rpx;
			}

			.main {
				padding: 30rpx;
				display: flex;
				justify-content: start;
				align-items: center;
				flex-wrap: wrap;

				.item {
					margin: 10rpx;
					text-align: center;
					display: flex;
					flex-direction: column;
					width: 130rpx;
					font-size: 23rpx;

					.image {
						// height: 100rpx;
						// width:100rpx;
						background-color: rgb(18, 150, 219);
						margin: 0 auto;
						padding: 15rpx;
						margin-bottom: 10rpx;
						border-radius: 20rpx;

						image {
							width: 60rpx;
							height: 60rpx;
							margin: auto;
							top: 0;
							bottom: 0;
							left: 0;
							right: 0;
						}
					}
				}
			}
		}
	}
</style>